<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="20" >
                <div style="margin-left:20px;font-weight: bolder;color:#666">添加文件</div>
            </el-col>
            <el-col :span="4">
                <el-button @click="go">返回列表</el-button>
            </el-col>
        </el-row>
        <el-form  ref="form" :model="form" label-position="labelPosition" label-width="100px">
            <el-form-item label="选择栏目" >
                <template>
                    <el-select v-model="form.file_manage_id" placeholder="请选择">
                        <el-option
                                v-for="item in options2"
                                :key="item.id"
                                :label="item.value"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>
            <el-form-item label="文件标题" >
                <el-input style="width:300px" v-model="form.title"></el-input>
            </el-form-item>
        </el-form>
        <div style="margin-bottom:20px;margin-left:45px;font-size:16px;color:#666">
            上传文件
        </div>
        <div style="margin-left:100px;margin-bottom:20px">
            <el-upload
                    class="upload-demo"
                    :action="fileUploadAction"
                    :on-change="change"
                    :on-remove="remove"
                    :on-success="success"
                    :on-error="err"
                    :before-upload="beforeAvatarUpload"
                    :file-list="fileList3">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">（支持word/excle/pdf格式，文件大小不能超过50M)</div>
            </el-upload>
        </div>
        <div style="width:200px;margin:50px 60px;"><el-button  type="primary" style="width: 200px" @click="submit">提交</el-button></div>
    </div>
</template>
<script>
    import _http from '@/components/common/http.vue'
    import _param from '@/components/common/param.vue'
    import '@/assets/ueditor/ueditor.config.js'
    import '@/assets/ueditor/ueditor.all.min.js'
    import '@/assets/ueditor/ueditor.parse.min.js'
    import '@/assets/ueditor/lang/zh-cn/zh-cn.js'
    export default {
        data() {
            return {
                fileList3:[],
                options2:[],
                userid:'',
                apiPort:{
///                    发布内容接口
                    upFile:"files/addFile",
                    getSel:'files/getFileManages'
                },
                form:{
                    userid:'',
                    file_manage_id:'',
                    title:'',
                    file_path:''
                },
                fileUploadAction:_param.param.fileUploadUrl,
                activeName: 'second',
                labelPosition: 'right',
                dialogImageUrl: '',
                dialogVisible: false
            };
        },
        mounted(){
            this.userid=localStorage.getItem('userId')
            this.form.userid = localStorage.getItem('userId')
            this.getsele()
            var that = this
            this.editor = UE.getEditor('editor');

        },
        methods: {
            err(){
                this.$message.error('文件上传失败');
            },
            getsele(){
                var that = this
                var params = that.querystring.stringify({userid:that.userid})
                _http.axiosRequest(that,that.apiPort.getSel,params,(res)=>{
                    console.log(res.data.data.filemanage)
                that.options2=res.data.data.filemanage
                })
            },
            submit(){
                var that = this
                var params = that.querystring.stringify(this.form)
                console.log(this.form)
                _http.axiosRequest(that,that.apiPort.upFile,params,(res)=>{
                    if(res.data.code==100){
                    that.$message({
                        message: '上传成功',
                        type: 'success'
                    });
                    setTimeout(function(){
                        that.$router.go(-1)
                    },500)
                }else{
                    that.$message({
                        message:res.data.msg,
                        type: 'warning'
                    });
                }
            })
            },
            handleClick(tab, event) {
                console.log(tab, event);
            },
            go(){
//                router.go({name: 'fabu', params: {userId: 1}});
                this.$router.go(-1)
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            success(response,file,fileList){
                console.log(file)
                console.log(response)
                this.form.file_path=response.url
                console.log(this.form.file_path
                )
            },
            remove(){
                this.fileList3=[]
                this.form.file_path=''
            },
            change( file,fileList){
//                this.form.file_path=res.url
                console.log(fileList)
                if(fileList){
                    this.fileList3 = fileList.slice(-1);
                }

                console.log(this.fileList3)
            },
//            application/vnd.openxmlformats-officedocument.wordprocessingml.document
//            application/pdf
//            application/-excel
            beforeAvatarUpload(file) {

//                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 50;
                var flag = true

                if (!(file.type == 'application/pdf'||file.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'||file.type == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document')) {
                    this.$message.error('上传文件只能是word/excle/pdf 格式!');
                    flag=false
                }
                if (!isLt2M) {
                    this.$message.error('上传文件大小不能超过 50MB!');
                }
                return isLt2M&&flag;
            }
        }
    };
</script>